<template>
  <div class="godForgetpasswordBox">
      <div class="godForget">
        <div class="godforget-header">
            <h2>忘记密码</h2>
            <div class="godforget-line"></div>
        </div>
        <div class="resetBox" >
            <el-form :label-position="labelPosition" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" 
                label-width="100px" class="demo-ruleForm" 
            >
                <el-form-item label="密码" prop="pass">
                    <!-- <el-input :type="passwordType" v-model="ruleForm.pass" auto-complete="off"></el-input> -->
                    <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
                    <div @click="mingan($event)" class="mingan">
                        <i class="el-icon-view"></i>
                        <span v-show="passwordType == 'password'?false:true" class="slash" ></span>
                    </div>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <!-- <el-input :type="passwordType" v-model="ruleForm.checkPass" auto-complete="off"></el-input> -->
                    <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
                    <div @click="mingan($event)" class="mingan">
                        <i class="el-icon-view"></i>
                        <span v-show="passwordType == 'password'?false:true" class="slash" ></span>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">完成</el-button>
                    <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                </el-form-item>
            </el-form>            
            
        </div>
      </div>
  </div>
</template>
<script>
    export default {
        data(){
                var validatePass = (rule, value, callback) => {
                    let daReg = /.*[A-Z]+.*[A-Z]+.*/
                    let xiaoReg = /.*[a-z]+.*[a-z]+.*/
                    let numberReg = /.*[0-9]+.*[0-9]+.*/
                    let fuhaoReg = /.*[\~\!\@\#\$\%\^\&\*\(\)\_\+\=\-\[\]\{\}\;\:\'\"\\\|\,\<\.\>\/\?]+.*[\~\!\@\#\$\%\^\&\*\(\)\_\+\=\-\[\]\{\}\;\:\'\"\\\|\,\<\.\>\/\?]+.*/
                    // console.log(daReg.test(value) && xiaoReg.test(value) && numberReg.test(value) && fuhaoReg.test(value));
                  if (value === '') {
                    callback(new Error('请输入密码'));
                  } else if (!(daReg.test(value) && xiaoReg.test(value) && numberReg.test(value) && fuhaoReg.test(value))){
                    callback(new Error('大写字母、小写字母、数字和标点符号至少包含2种'));
                  } else {
                    if (this.ruleForm.checkPass !== '') {
                      this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                  }
                };
                var validatePass2 = (rule, value, callback) => {
                  if (value === '') {
                    callback(new Error('请再次输入密码'));
                  } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                  } else {
                    callback();
                  }
                };            
            
            return{
                // 对齐方式
                labelPosition:'top',
                ruleForm: {
                    pass: '',
                    checkPass: '',
                    // age: ''
                  },
                  rules: {
                    pass: [
                      { validator: validatePass, trigger: 'blur', required: true }
                    ],
                    checkPass: [
                      { validator: validatePass2, trigger: 'blur', required: true }
                    ],
                    
                  },
                  passwordType:'password'
            }
        },
        methods:{
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            mingan(e){
                let type = e.currentTarget.previousElementSibling.getElementsByTagName('input')[0];
                if (e.currentTarget.getElementsByTagName('span')[0].style.display == 'inline-block'){
                    e.currentTarget.getElementsByTagName('span')[0].style.display = 'none';
                }else{
                    e.currentTarget.getElementsByTagName('span')[0].style.display = 'inline-block';
                }
                if (type.getAttribute('type') == 'password'){
                    type.setAttribute('type','text')
                    // this.passwordType = 'text';
                }else{
                    type.setAttribute('type','password')
                    // this.passwordType = 'password';
                }
                
            }
            // mingan(e){
            //     let type = e.currentTarget.previousElementSibling.getElementsByTagName('input')[0];
            //     if (type.getAttribute('type') == 'password'){
            //         type.setAttribute('type','text')
            //         // this.passwordType = 'text';
            //     }else{
            //         type.setAttribute('type','password')
            //         // this.passwordType = 'password';
            //     }
                
            // }

        }
    }
</script>
